 <template>
  <div class="home_left w-100%">
    <MCard class="w-100% min-h-360px top_card">
      <template #header>
        <span>{{ t('home.terminal_information_label') }}</span>
      </template>
      <div class="flex gap-10px">
        <div v-for="(_,key) in apHardwareInfo" :key="key" class="w-100% h-100%">
          <SatellitePieChart :title="apHardwareInfo[key].title" :seriesData="apHardwareInfo[key].seriesData" />
        </div>
      </div>
      <div class="p-l-20px m-b-15px">
        <div class="text-#FFFFFF ">{{ t('home.ap_version_label') }}</div>
        <el-tooltip :content="apInfo.apVersion" placement="top" effect="light">
          <div class="text-#00AAFF text-size-15px  cursor-pointer font-bold">
            {{ apInfo.apVersion }}
          </div>
        </el-tooltip>
      </div>
      <div class="grid grid-cols-2 p-l-20px" style="gap: 20px;">
        <div v-for="(_,key) in apInfoLabel" v-show="key!=='apVersion'" :key="key" class="flex flex-col gap-5px">
          <div class="text-#FFFFFF text-size-13px">{{ apInfoLabel[key].label }}</div>
          <el-tooltip :content="apInfo[key]" placement="top" effect="light">
            <div class="text-#00AAFF text-size-15px truncate cursor-pointer font-bold">
              {{ apInfo[key] }}
            </div>
          </el-tooltip>
        </div>
      </div>
    </MCard>
    <MCard  class="w-100% min-h-610px">
      <template #header>
        <span>{{ t('home.baseband_status_label') }}</span>
      </template>
      <!-- 固件版本信息 -->
      <div class="m-b-20px">
        <div class="text-#FFFFFF text-size-13px">{{ t('home.firmware_version_label') }}</div>
        <el-tooltip :content="String(basebandInfo.firmwareName)" placement="top" effect="light">
          <div class="text-#00AAFF text-size-15px truncate cursor-pointer font-bold">
            {{ basebandInfo.firmwareName }}
          </div>
        </el-tooltip>
      </div>
      <!-- 基带信息列表 -->
      <template v-for="(item, index) in basebandInfo.list" :key="index">
        <div class="grid grid-cols-3 m-t-20px" style="gap: 30px 20px;">
          <template v-for="key in Object.keys(item)" :key="key">
            <div v-if="basebandLabel[key]">
              <div class="text-#FFFFFF text-size-13px">{{ basebandLabel[key].label }}</div>
              <el-tooltip :content="String(item[key])" placement="top" effect="light">
                <div class="text-#00AAFF text-size-15px truncate cursor-pointer font-bold">
                  <div v-if="basebandLabel[key].isCustom && key === 'networkAccessStatus'"
                    :class="item[key] === '成功' ? 'normal' : ''">
                    {{ item[key] }}
                  </div>
                  <div v-else>
                    {{ item[key] }}
                  </div>
                </div>
              </el-tooltip>
            </div>
          </template>
        </div>
      </template>
      <div class="grid grid-cols-3" style="gap: 20px;">
      <!-- 自动入网状态 -->
      <div class="m-t-20px">
        <div class="text-#FFFFFF text-size-13px">{{ t('home.auto_network_access_status_label') }}</div>
        <el-tooltip :content="String(basebandInfo.autoNetworkAccessStatus)" placement="top" effect="light">
          <div class="text-#00AAFF text-size-15px truncate cursor-pointer font-bold" :class="computedAutoStyle(basebandInfo.autoNetworkAccessStatus)">
            {{ basebandInfo.autoNetworkAccessStatus }}
          </div>
        </el-tooltip>
      </div>
      <!-- sib2状态 -->
      <div class="m-t-20px">
        <div class="text-#FFFFFF text-size-13px">sib2状态</div>
        <el-tooltip :content="String(sib2Status.status)" placement="top" effect="light">
          <div class="text-#00AAFF text-size-15px truncate cursor-pointer font-bold">
            {{ sib2Status.status===1?"开":"关" }}
          </div>
        </el-tooltip>
      </div>
    </div>

      <!-- 内存池状态 -->
       <div class="memory_pool_status m-t-20px">
         <div class="title-section">
           <div class="title-decoration"></div>
           <span>{{ t('home.memory_pool_status_label') }}</span>
         </div>        
         <!-- 表头 -->
         <div class="memory-table-header">
           <div class="name-column">{{ t('home.name_label') }}</div>
           <div class="percent-column">{{ t('home.percentage_label') }}</div>
           <div class="usage-column">{{ t('home.used_label') }}/{{ t('home.total_label') }}</div>
         </div>        
         <!-- 表格内容 -->
         <div class="memory-table-content">
           <!-- 第一行（堆内存） -->
           <div class="memory-row">
             <div class="name-column">{{ t('home.heap_memory_label') }}</div>
             <div class="percent-column">
               <div class="progress-wrapper">
                 <el-progress :percentage="cpDeviceStatuslist[0]?.percentage" :text-inside="true" :stroke-width="16" ></el-progress>
               </div>
             </div>
             <div class="usage-column">{{ cpDeviceStatuslist[0]?.used }}/{{ cpDeviceStatuslist[0]?.total }}</div>
           </div>
           
           <!-- 其他行（内存池） -->
           <div class="memory-rows-wrapper">
             <div 
               v-for="(item,index) in cpDeviceStatuslist" 
               :key="index" 
               v-show="index!==0"
               class="memory-row"
             >
               <div class="name-column">{{ t('home.memory_pool_label') }}({{ item.block }})</div>
               <div class="percent-column">
                 <div class="progress-wrapper">
                   <el-progress :percentage="item.percentage" :text-inside="true" :stroke-width="16" ></el-progress>
                 </div>
               </div>
               <div class="usage-column">{{ item.used }}/{{ item.total }}</div>
             </div>
           </div>
         </div>
       </div>
    </MCard>
  </div>
</template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'HomeLeft',
 })
 </script>
 <script setup  lang="ts">
 import { useI18n } from 'vue-i18n'
 import SatellitePieChart from '@/components/Echarts/SatellitePieChart.vue'
 import { getWebSocketInstance } from '@/utils/websocketExample'
 const ws = getWebSocketInstance()
 const { t } = useI18n()
 const apHardwareInfo = ref<any>({
  cpu_usage: {
    title: 'CPU使用',
    seriesData: []
  },
  memory_usage: {
    title: '内存使用',
    seriesData: []
  },
  disk_usage: {
    title: '磁盘占用',
    seriesData: []
  }
 })
 async function getApHardwareInfo(data:any){
  try {
    Object.keys(data).forEach(key=>{
      let rawValue = Math.max(0, Math.min(100, data[key]))
      const value = rawValue/100
      apHardwareInfo.value[key].seriesData[0] = Number(value)
      apHardwareInfo.value[key].seriesData[1] = Number(value)-0.1
      apHardwareInfo.value[key].seriesData[2] = Number(value)-0.2
    })
  } catch (error) {}
}
const networkAccessState:any = {
  "success":"已入网",
  "failed":"未入网"
}
const autoNetworkAccessState:any = {
  0:'等待中', 
  1:'平台初始化失败',
  2:'天线初始化失败',
  3:'定位初始化失败',
  4:'对星失败',
  5:'自动入网中',
  6:'自动入网已关闭',
  7:"已入网"
}
const Track:any = {
  "highrail":"高轨",
  "lowrail":"低轨"
}
const basebandInfo = ref<any>({
  list:[
    {
      temperature:"",
      track:"",
      networkAccessStatus:"",
    }
  ],
  autoNetworkAccessStatus:"" ,
  firmwareName:""
})
const basebandLabel = computed(():any=>{
  return {
    firmwareName:{
      label:t('home.firmware_version_label'),
      isCustom:false,
    },
    temperature:{
      label:t('home.temperature_label'),
      isCustom:false,
    },
    track:{
      label:t('home.support_track_label'),
      isCustom:false,
    },
    networkAccessStatus:{
      label:t('home.network_access_status_label'),
      isCustom:true,
    },
    autoNetworkAccessStatus:{
      label:t('home.auto_network_access_status_label'),
      isCustom:true,
    }
  }
})
async function getCurrentCpVersion(data:any){
  try {
    basebandInfo.value.firmwareName = data.name
  } catch (error) {
    
  }
}
async function getBasebandStatus(data:any){
  try {
    const info = data.info
    basebandInfo.value.list = info.map((item:any)=>{
      return {
        temperature:item.devinfo.board_temer_temper,
        track:Track[item.devinfo.config],
        networkAccessStatus:networkAccessState[item.status]
      }
    })
  } catch (error) {}
}
async function getAutoNetworkAccessStatus(data:any){
  try {
    basebandInfo.value.autoNetworkAccessStatus = autoNetworkAccessState[data.state]
  } catch (error) { }
}
function computedAutoStyle(key:any){
  switch (key) {
    case '等待中':
    case "平台初始化失败":
    case "天线初始化失败":
    case "定位初始化失败":
   case '自动入网已关闭':
   case "对星失败":
    return ''
    case '自动入网中':
    return 'normal'    
  }
}
const apInfo = ref<any>({
  terminalId:'',
  apVersion:'',
})
const apInfoLabel = computed(()=>{
  return {
    terminalId:{
      label:t('home.terminal_id_label'),
      isCustom:false,
    },
    apVersion:{
      label:t('home.ap_version_label'),
      isCustom:false,
    }
  }
})
async function getApInfo(data:any){
  try {
  apInfo.value.apVersion = data.version+":"+data.index
  } catch (error) {}
}
function getHwid(data:any){
  apInfo.value.terminalId = data.hwid
}
const cpDeviceStatuslist = ref<any>([])
async function getCpDeviceStatus(data:any){
  try {
    cpDeviceStatuslist.value = data.info.map((item:any)=>{
      const used = item.total - item.avail
      const percentage = ((used/item.total)*100).toFixed(0)
      return {
        name:item.name,
        percentage:percentage,
        used:used,
        total:item.total,
        block:item.block || 0
      }
    })
  } catch (error) { }
}
const sib2Status = ref<any>({
  status:''
})
async function getSib2Status(data:any){
  try {
    sib2Status.value.status = data.sib2
  } catch (error) { }
}
const wsTaskData:any = {
  'ap_hw_ap_info':getApHardwareInfo,
  'ap_system_ap_version_cur_get':getApInfo,
  'ap_system_get_baseband_info':getBasebandStatus,
  'ap_sync_state':getAutoNetworkAccessStatus,
  'ap_system_cp_firmware_cur_get':getCurrentCpVersion,
  'ap_system_cp_device_info':getCpDeviceStatus,
  'ap_eph_sib2_get':getSib2Status,
  'ap_license_check_active':getHwid,
}
function handleWsMessage(response:any){
  const {cmd,data} = response
  if(wsTaskData[cmd]){
    wsTaskData[cmd](data)
  }
}
ws.on('message',handleWsMessage)
</script>
 
<style  lang="scss" scoped>
@import '@/styles/card.scss';
@import '@/styles/normal.scss';
@import '@/styles/progress.scss';
.top_card{
  :deep(.el-card__body){
    padding: 10px;
  }
}
.memory_pool_status {
  border-radius: 8px;
  color: #fff;
  position: relative; 
  .title-section {
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    position: relative;   
    .title-decoration {
      width: 3px;
      height: 16px;
      background: linear-gradient(180deg, #00D1ED 0%, #0077ff 100%);
      margin-right: 8px;
      border-radius: 1.5px;
      box-shadow: 0 0 8px rgba(0, 209, 237, 0.6);
      animation: glow 2s infinite alternate;
    }
  }
  .memory-table-header {
    display: flex;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 209, 237, 0.2);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    position: sticky;
    top: 0;
    // background: rgba(0, 10, 20, 0.8);
    z-index: 2;
    backdrop-filter: blur(2px);
  } 
  .memory-table-content {
    margin-top: 10px;
    position: relative;
    max-height: 200px;
  } 
  .memory-rows-wrapper {
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 209, 237, 0.5) rgba(0, 108, 183, 0.1);  
    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-track {
      background: rgba(0, 108, 183, 0.1);
      border-radius: 3px;
    }
    &::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(0, 209, 237, 0.5), rgba(0, 119, 255, 0.5));
      border-radius: 3px;
      box-shadow: inset 0 0 6px rgba(0, 209, 237, 0.2);
    }
    &::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, rgba(0, 209, 237, 0.7), rgba(0, 119, 255, 0.7));
    }
  }
  .memory-row {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 209, 237, 0.1);
    &:last-child {
      border-bottom: none;
    }
  }
  .name-column {
    width: 25%;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .percent-column {
    width: 50%;
    display: flex;
    align-items: center;
    .progress-wrapper {
      width: 80%;
      :deep(.el-progress) {
        margin-right: 0;
        
        .el-progress-bar__outer {
          background-color: rgba(0, 108, 183, 0.2);
          border-radius: 4px;
        }
        
        .el-progress-bar__inner {
          border-radius: 4px;
          background: linear-gradient(90deg, #0077ff, #00D1ED);
        }
        
        .el-progress-bar__innerText {
          color: #fff;
          font-size: 12px;
        }
      }
    }
  }
  
  .usage-column {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: 'Courier New', monospace;
    font-size: 14px;
  }
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(0, 209, 237, 0.5);
    opacity: 0.8;
  }
  100% {
    box-shadow: 0 0 10px rgba(0, 209, 237, 0.8);
    opacity: 1;
  }
}
</style>
 